<!-- 金积分 -->
<template>
  <div class="goldPoint sys-content">
    <page-mod>
      <el-card>
        <div class="query-box">
          <el-form :model="query" inline>
            <el-form-item label="手机号:">
              <el-input v-model="query.phone" placeholder="请输入手机号" clearable/>
            </el-form-item>
            <el-form-item label="经销商编号:">
              <el-input v-model="query.dealersId" placeholder="请输入经销商编号" clearable/>
            </el-form-item>
            <el-form-item label="经销商类型:">
              <el-select v-model="query.category" placeholder="请选择" clearable>
                <el-option label="推广员" :value="0" />
                <el-option label="门店经销商" :value="1" />
                <el-option label="区/县运营中心" :value="2" />
                <el-option label="市运营中心" :value="3" />
                <el-option label="省运营中心" :value="4" />
              </el-select>
            </el-form-item>
          </el-form>
          <div class="btns">
            <el-button icon="Search" color="#16b777" @click="load(1)">查询</el-button>
            <el-button icon="Refresh" color="#FF5722" @click="resetSearch">重置</el-button>
          </div>
        </div>
      </el-card>
    </page-mod>
    <page-mod title="金积分数据" icon="Histogram" :showBtn="false" :padBottom="false">
      <el-card v-loading="loading" element-loading-text="拼命加载中">
        <el-table ref="table" :data="dataList" max-height="493" border>
          <el-table-column label="序号" type="index" align="center" width="60"/>
          <el-table-column label="推广员编号" prop="memberCode" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="推广员名称" prop="memberName" align="center"></el-table-column>
          <el-table-column label="会员编号" prop="memberName" align="center"></el-table-column>
          <el-table-column label="推广员手机号" prop="memberName" align="center"></el-table-column>
          <el-table-column label="总金积分" prop="totalPoint" align="center"></el-table-column>
          <el-table-column label="已提现金积分" prop="usablePoint" align="center"></el-table-column>
          <el-table-column label="可用金积分" prop="usedPoint" align="center"></el-table-column>
          <el-table-column label="未入账金积分" prop="unrecordedPoint" align="center"></el-table-column>
          <el-table-column label="总提现手续费" prop="unrecordedPoint" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="410">
            <template #default="{row}">
              <el-button type="primary" icon="Edit" link @click="toViewTradeInfo(row.memberId, true)">交易日志</el-button>
              <el-divider direction="vertical" />
              <el-button type="primary" icon="Document" link @click="toViewTradeInfo(row.memberId, false)">收益记录</el-button>
              <el-divider direction="vertical" />
              <el-button type="primary" icon="CirclePlus" link @click="toGiveOrDeduct(true)">赠送积分</el-button>
              <el-divider direction="vertical" />
              <el-button type="primary" icon="Remove" link @click="toGiveOrDeduct(false)">扣除积分</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination 
          class="paging"
          v-show="query.total"
          small
          layout="total, sizes, prev, pager, next, jumper" 
          :current-page="query.current" 
          :page-size="query.size"
          :total="query.total"
          @current-change="load"
          @size-change="sizeChange">
        </el-pagination>
      </el-card>
    </page-mod>

    <!-- 交易日志,交易记录弹窗 -->
    <el-dialog 
      v-model="show" 
      :title="tradeType ? '交易日志' : '收益记录'" 
      :width="tradeType ? '90%' : '60%'" 
      top="10vh" 
      center 
      draggable 
      @close="dialogClose">
      <el-table ref="table" :data="tradeList" max-height="493" border v-loading="loading1" element-loading-text="拼命加载中">
        <el-table-column label="序号" type="index" align="center" width="60"/>
        <el-table-column label="操作时间" prop="memberCode" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="交易积分数" prop="memberCode" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="业务编号" prop="totalPoint" align="center"></el-table-column>
        <el-table-column label="业务类型" prop="enableStatus" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="盈亏类型" prop="memberName" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="总积分" prop="usablePoint" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="交易后总积分" prop="usablePoint" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="已提现积分" prop="usablePoint" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="交易后已提现积分" prop="usedPoint" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="本次提现手续费" prop="unrecordedPoint" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="提现手续费" prop="unrecordedPoint" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="交易后提现手续费" prop="unrecordedPoint" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="可用积分" prop="unrecordedPoint" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="交易后可用积分" prop="unrecordedPoint" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="未入账积分" prop="unrecordedPoint" align="center"></el-table-column>
        <el-table-column v-if="tradeType" label="交易后未入账积分" prop="unrecordedPoint" align="center"></el-table-column>
        <el-table-column v-if="!tradeType" label="购买人手机" prop="unrecordedPoint" align="center"></el-table-column>
        <el-table-column v-if="!tradeType" label="交易状态" prop="unrecordedPoint" align="center"></el-table-column>
        <el-table-column label="说明" prop="unrecordedPoint" align="center" show-overflow-tooltip></el-table-column>
      </el-table>
      <el-pagination 
        class="paging"
        v-show="query1.total"
        small
        layout="total, sizes, prev, pager, next, jumper" 
        :current-page="query1.current" 
        :page-size="query1.size"
        :total="query1.total"
        @current-change="loadTrade"
        @size-change="tradeSizeChange">
      </el-pagination>
    </el-dialog>

    <el-dialog v-model="show1" :title="form.type ? '赠送积分' : '扣除积分'" top="10vh" width="23%" center draggable @close="resetForm">
      <el-form ref="formRef" :model="form" :rules="rules" size="default" label-width="95px">
        <el-form-item label="名称:" prop="name">
          <el-input v-model="form.name" readonly/>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="form.phone" readonly/>
        </el-form-item>
        <el-form-item label="订单号:" prop="businessId" required>
          <el-select 
            class="custom_select"
            v-model="form.businessId"
            filterable
            remote
            remote-show-suffix 
            clearable 
            placeholder="请输入订单号查询"
            :remote-method="loadOrder"
            :loading="selectLoading">
            <el-option v-for="item in orders" :key="item.businessId" :label="item.businessName" :value="item.businessId"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="form.type ? '赠送积分' : '扣除积分'" prop="integral" required>
          <el-input v-model="form.integral" :placeholder="'请输入' + (form.type ? '赠送' : '扣除') + '积分'" type="number" clearable/>
        </el-form-item>
        <el-form-item label="备注:" prop="description">
          <el-input v-model="form.description" type="textarea" rows="5" placeholder="请输入备注" clearable/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" size="default" @click="doSubmit">保存</el-button>
        <el-button size="default" @click="show1 = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="goldPoint">
  import { getGoldPointListPagesApi, getGpTradeLogPagesApi, getGpIncomeRecordPagesApi, giveOrDeductGoldPointApi } from '@/api/api'
  import { ref, reactive, toRefs, getCurrentInstance, onActivated } from 'vue'

  // 获取注册的全局实列
  const currentThis = getCurrentInstance().appContext.config.globalProperties

  const formRef = ref(null)

  const currentData = reactive({
    loading: false,
    loading1: false,
    selectLoading: false,
    show: false,
    show1: false,
    tradeType: false,
    query: {
      phone: '',
      dealersId: '',
      category: '',
      current: 1,
      size: 20,
      total: 0
    },
    query1: {
      memberId: '',
      current: 1,
      size: 20,
      total: 0
    },
    form: {
      type: true,
      name: '',
      phone: '',
      businessId: '',
      integral: '',
      description: ''
    },
    rules: {
      businessId: [{ required: true, message: '请输入订单号查询', trigger: ['blur', 'change'] }],
      integral: [{ required: true, message: '请输入积分', trigger: ['blur', 'change'] }],
    },
    dataList: [{}],
    tradeList: []
  })
  let {loading, loading1, selectLoading, show, show1, tradeType, query, query1, form, rules, dataList, tradeList} = toRefs(currentData)

  // 查询
  function load(page) {
    currentData.loading = true
    currentData.query.current = page
    getGoldPointListPagesApi(currentData.query).then(res => {
      currentData.loading = false
      if(res.code === '200') {
        // currentData.dataList = res.data.pages
        currentData.query.total = res.data.total
      } else {
        currentThis.$message.error(res.message)
      }
    })
  }

  function toGiveOrDeduct(e) {
    currentData.form.type = e
    currentData.show1 = true
  }

  function doSubmit() {
    formRef.value.validate((valid) => {
      if (valid) {
        currentThis.$messageBox.confirm(`确认${currentData.form.type ? '赠送' : '扣除'}积分吗？`).then(() => {
          let loading = currentThis.$loading(`正在${currentData.form.type ? '赠送' : '扣除'}扣除，请耐心等待`)
          giveOrDeductGoldPointApi(`${currentData.form.type ? 'save' : 'deduct'}`, currentData.form).then(res => {
            loading.close()
            if(res.code === '200') {
              currentThis.$message.success(res.message)
              currentData.show1 = false
              load(currentData.query.current)
            } else {
              currentThis.$message.error(res.message)
            }
          })
        }).catch(() => {})
      } else {
        return false;
      }
    })
  }

  // 点击交易日志或收益记录
  function toViewTradeInfo(memberId, type) {
    this.tradeType = type
    this.query1.memberId = memberId
    this.loadTrade(1)
    this.show = true
  }

  // 查询交易日志或收益记录
  function loadTrade(page) {
    currentData.loading1 = true
    currentData.query1.current = page
    if(currentData.tradeType) {
      getGpTradeLogPagesApi(currentData.query1).then(res => { // 查询交易日志
        currentData.loading1 = false
        if(res.code === '200') {
          currentData.tradeList = res.data.pages
          currentData.query1.total = res.data.total
        } else {
          currentThis.$message.error(res.message)
        }
      })
    } else {
      getGpIncomeRecordPagesApi(currentData.query1).then(res => { // 查询收益记录
        currentData.loading1 = false
        if(res.code === '200') {
          currentData.tradeList = res.data.pages
          currentData.query1.total = res.data.total
        } else {
          currentThis.$message.error(res.message)
        }
      })
    }
  }

  // 重置查询
  function resetSearch() {
    currentData.query.phone = ''
    currentData.query.dealersId = ''
    currentData.query.category = ''
    load(1)
  }

  // 交易日志,收益记录弹窗关闭时候重置查询条件
  function dialogClose() {
    currentData.query1 = {
      memberId: '',
      current: 1,
      size: 20,
      total: 0
    }
    currentData.tradeList = []
  }

  // 积分赠送或扣除弹窗重置数据
  function resetForm() {
    currentData.form = {
      type: true,
      name: '',
      phone: '',
      businessId: '',
      integral: '',
      description: ''
    }
    formRef.value.resetFields()
  }

  // 分页每页显示条数改变执行
  function sizeChange(size) {
    currentData.query.size = size
    load(1)
  }

  // 交易日志和收益记录弹窗分页每页显示条数改变执行
  function tradeSizeChange(size) {
    currentData.query.size = size
    loadTrade(1)
  }

  onActivated(() => {
    load(currentData.query.current)
  })
</script>

<style lang="less" scoped>
.goldPoint{
  :deep(.el-table) {
    .img-cell{
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>